<template>
    <div class="detail_box">

        <li>编号：{{ id }}</li>
        <li>标题：{{ title }}</li>
        <li>内容：{{ content }}</li>
    </div>
</template>
<script setup lang="ts">
// import { toRefs } from 'vue';
// import { useRoute } from 'vue-router';
// 第一种 route为响应式的
// let route=useRoute()

// 第二种
// 由于解构赋值会把一个响应式变成不是响应式，需通过toRefs将其转成响应式对象
// let { query } = toRefs(useRoute());
// 用于params参数
// let {params}=toRefs(useRoute())

// 第三种利用props
defineProps(['id','title','content'])
</script>
<style scoped>
.detail_box {
    padding: 10px;
}

li {
    text-decoration: none;
    list-style: none;
    font-size: 16px;
    margin-bottom: 10px;
}
</style>